<template>
    <div class="login-container">
        <div class="login-weaper  animated bounceInDown">
            <div class="login-left">
                <img class="img"
                     src="../assets/avatar.jpg"
                     alt="">
                <p class="title">SPeed TALK 云中台</p>
                <p>©2022 TLGEN</p>
            </div>
            <div class="login-border">
                <div v-if="activeName==='user'" class="login-main">
                    <el-form class="login-form"
                             status-icon
                             :rules="loginRules"
                             ref="loginForm"
                             :model="loginForm"
                             label-width="0">
                        <el-form-item prop="username">
                            <a-input size="large"
                                     @keyup.enter.native="handleLogin"
                                     v-model="loginForm.username"
                                     auto-complete="off"
                                     placeholder="请输入用户名">
                                <i slot="prefix"
                                   class="icon-yonghu"></i>
                            </a-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <a-input size="large"
                                     @keyup.enter.native="handleLogin"
                                     :type="passwordType"
                                     v-model="loginForm.password"
                                     auto-complete="off"
                                     placeholder="请输入密码">
                                <i class="el-icon-view el-input__icon"
                                   slot="suffix"
                                   @click="showPassword"></i>
                                <i slot="prefix"
                                   class="icon-mima"></i>
                            </a-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-row :span="24">
                                <el-col :span="16">
                                    <a-input size="large"
                                             @keyup.enter.native="handleLogin"
                                             :maxlength="code.len"
                                             v-model="loginForm.code"
                                             auto-complete="off"
                                             placeholder="请输入验证码">
                                        <i slot="prefix"
                                           class="icon-yanzhengma"></i>
                                    </a-input>
                                </el-col>
                                <el-col :span="8">
                                    <div class="login-code">
            <span class="login-code-img"
                  @click="refreshCode"
                  v-if="code.type == 'text'">{{code.value}}</span>
                                        <img :src="code.src"
                                             class="login-code-img"
                                             @click="refreshCode"
                                             v-else/>
                                    </div>
                                </el-col>
                            </el-row>

                        </el-form-item>
                        <el-form-item>
                            <a-button
                                    size="large"
                                    style="width: 100%"
                                    type="primary"
                                    @click.native.prevent="handleLogin"
                                    >登录
                            </a-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                activeName: "user",
                loginForm: {
                    username: "admin",
                    password: "123456",
                    code: "",
                    redomStr: ""
                },
                checked: false,
                code: {
                    src: "/code",
                    value: "",
                    len: 4,
                    type: "image"
                },
                loginRules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {min: 6, message: "密码长度最少为6位", trigger: "blur"}
                    ],
                    code: [
                        {required: true, message: "请输入验证码", trigger: "blur"}
                    ]
                },
                passwordType: "password"
            };
        },
        created() {
            this.refreshCode();
        },
        methods: {
            refreshCode() {
                this.loginForm.code = ''
            },
            showPassword() {
                this.passwordType == ''
                    ? (this.passwordType = 'password')
                    : (this.passwordType = '')
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.$store.dispatch("Login", this.loginForm).then(() => {
                            this.$router.push({path: '/'});
                        }).catch(() => {
                            this.refreshCode()
                        })

                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>

    .login-container {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        height: calc(100vh);
        margin: 0 auto;
        background: #f8f8f9;
        animation: animate-cloud 20s linear infinite;
    }

    .login-weaper {
        margin: 0 auto;
        width: 1000px;
        box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
        border-bottom-left-radius: 5px;
    }

    .login-left,
    .login-border {
        position: relative;
        min-height: 500px;
        align-items: center;
        display: flex;
    }

    .login-left {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        justify-content: center;
        flex-direction: column;
        background-color: #409EFF;
        color: #fff;
        float: left;
        width: 50%;
        position: relative;
    }

    .login-left .img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
    }

    .login-time {
        position: absolute;
        left: 25px;
        top: 25px;
        width: 100%;
        color: #fff;
        font-weight: 200;
        opacity: 0.9;
        font-size: 18px;
        overflow: hidden;
    }

    .login-left .title {
        margin-top: 60px;
        text-align: center;
        color: #fff;
        font-weight: 300;
        letter-spacing: 2px;
        font-size: 25px;
    }

    .login-border {
        border-left: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        color: #fff;
        background-color: #fff;
        width: 50%;
        float: left;
        box-sizing: border-box;
    }

    .login-main {
        margin: 0 auto;
        width: 65%;
        box-sizing: border-box;
    }

    .login-main > h3 {
        margin-bottom: 20px;
    }

    .login-main > p {
        color: #76838f;
    }

    .login-title {
        color: #333;
        margin-bottom: 40px;
        font-weight: 500;
        font-size: 22px;
        text-align: center;
        letter-spacing: 4px;
    }

    .login-select {
        input {
            color: #333;
            font-size: 18px;
            font-weight: 400;
            border: none;
            text-align: center;
        }
    }

    .login-menu {
        margin-top: 40px;
        width: 100%;
        text-align: center;

        a {
            color: #999;
            font-size: 12px;
            margin: 0px 8px;
        }
    }

    .login-form {
        margin: 10px 0;

        i {
            color: #333;
        }

        .el-form-item__content {
            width: 100%;
            height: 100%;
        }

        .el-form-item {
            margin-bottom: 12px;
            height: 60px;
        }

        .el-input {
            input {
                padding-bottom: 10px;
                text-indent: 5px;
                background: transparent;
                border: none;
                border-radius: 0;
                color: #333;
                border-bottom: 1px solid rgb(235, 237, 242);
            }

            .el-input__prefix {
                i {
                    padding: 0 5px;
                    font-size: 16px !important;
                }
            }
        }
    }

    .login-code {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 0 0 0 10px;
    }

    .login-code-img {
        margin-top: 2px;
        width: 100px;
        height: 38px;
        background-color: #fdfdfd;
        border: 1px solid #f0f0f0;
        color: #333;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 5px;
        line-height: 38px;
        text-indent: 5px;
        text-align: center;
    }


</style>
